<template>
	
	<view class="">
		<TextNavBar title="分享海报"></TextNavBar>
		
		<view class="box">
			<image mode="widthFix" :src="bg" hover-class="hover"></image>
		    
			
			<view class="card">
				<PosterTheme1  @getPosterUrl="getPosterUrl" :info="info" style="box-shadow: 0px 14px 30px 0px rgba(226, 222, 204, 0.4);"></PosterTheme1>
				<view class="button-c" @tap.native.stop="prevent">
					<button hover-class="hover" @tap="saveImg">保存海报至相册</button>
				</view>
			</view>
			
			
			
		</view>
		
	</view>
	
   
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import PosterTheme1 from '../../components/SharePopup/components/posterTheme1.vue';
	import {BASE_URL} from "@/config/index.js";
	export default{
		components: {
			PosterTheme1
		},
        data(){
            return {
				bg:'https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/other/haibao_bg.png',
				title:'',
                qrcode: '',
				thumb: '',
				image: '',
            }
        },
		computed: {
			...mapGetters(["userInfo"]),
			info() {
				return {
					title: this.userInfo.name,
					qrcode: BASE_URL + '/miniapp/qrcode?path=pages/index/index?inviter='+this.userInfo.uuid+'&uuid='+this.userInfo.uuid,
					thumb: 'https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/img/other/haibao.jpg',
					desc: '邀请您加入泡泡BOX',
				}
			},
		},
        onLoad(e) {
			this.title = this.userInfo.name;
			this.title = this.userInfo.name;
        },
        methods:{
			
            getPosterUrl (url) {
            	this.image = url
            },
			saveImg() {
				console.log('saving', this.image)
				uni.saveImageToPhotosAlbum({
					filePath: this.image,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'none'
						});
					}
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
	.hover {
		opacity: 0.1;
	}
	
	.box {
		display: flex;
		justify-content: flex-start;
		position: relative;
		width: 100%;
		flex-wrap: wrap;
		box-sizing: border-box;
		
		
		image {
			width: 100%;
			display: block;
			// display: inline;
			// display: inline-block;
			margin: 0rpx;
		}
		
		.card {
			position: absolute;
			top: 250rpx;
			// left: 95rpx;
			width: 100%;
		}
		
	}
	
	
    
    .button-c {
    	margin-top: 30px;
    	display: flex;
    	justify-content: center;
    
    	button {
    		height: 90rpx;
    		line-height: 90rpx;
    		padding: 0 40rpx;
    		background-color: #FFBF42;
    		color: white;
    		font-size: 28rpx;
    		border-radius: 46rpx;
    		margin: 0 20rpx;
    	}
    }
    
</style>
